<template>
  <div class="abnormal">
    <div style="padding: 10px 0">
      <i class="el-icon-back back" @click="$router.go(-1)"></i>
    </div>
    <div class="header">
      <div>巡检人：{{ $route.query.inspector }}</div>
      <div>巡检时间：{{ $route.query.inspection_date }}</div>
    </div>
    <div style="padding-bottom: 10px">
      <el-button type="primary" @click="exportExcel">导出</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData">
        <el-table-column prop="room_name" label="位置"> </el-table-column>
        <el-table-column prop="device_name" label="设备名称"> </el-table-column>
        <el-table-column
          prop="device_fault_reason"
          label="故障描述"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="故障图片">
          <template slot-scope="scope">
            <img
              v-for="(item, index) in JSON.parse(scope.row.img_list)"
              :key="index"
              class="device_img"
              :src="item.url"
              @click="showImg(item.url)"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="factory_name" label="维护单位">
        </el-table-column>
        <el-table-column prop="telephone" label="联系单位"> </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { exceptionDevices, exportInspectionData } from '@/api/index';
export default {
  name: 'AbnormalDevice',
  data() {
    return {
      tableData: [],
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  mounted() {
    this.getExceptionDevices();
  },
  methods: {
    async getExceptionDevices() {
      const res = await exceptionDevices({
        inspection_id: this.$route.query.inspection_id,
        device_status: '0',
      });
      this.tableData = res;
    },
    async exportExcel() {
      const res = await exportInspectionData({
        inspection_id: this.$route.query.inspection_id,
        device_status: '0',
      });
      // 创建一个Blob对象来存储Excel文件
      const blob = new Blob([res], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      });
      // 创建一个URL对象来生成下载链接
      const downloadUrl = URL.createObjectURL(blob);
      // 创建一个a标签来触发下载
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = `${this.$route.query.inspector}-${this.$route.query.inspection_date}-异常设备表.xlsx`; // 设置下载文件的名称
      link.click();
      // 释放URL对象
      URL.revokeObjectURL(downloadUrl);
      this.$message.success('导出成功');
    },
    showImg(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.abnormal {
  padding: 20px 40px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .back {
    font-size: 30px;
    color: #aaa;
    border: 1px solid #aaa;
    border-radius: 50%;
    cursor: pointer;
  }
  .header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 20px;
    padding-bottom: 20px;
    color: #606266;
  }
  .table {
    flex: 1;
    overflow: auto;
    .device_img {
      width: 40px;
      height: 40px;
      cursor: pointer;
      & + .device_img {
        margin-left: 4px;
      }
    }
  }
}
</style>
